<template>
  <div class="userManage-container">
    <el-row class="userManage-maintop">
      <el-col :span="24"
              align="right">
        <el-input class="col-2"
                  placeholder="所属公司"></el-input>
        <el-input class="col-2"
                  placeholder="用户名"></el-input>
        <el-button type="primary"
                   icon="el-icon-search">查询</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :highlight-current-row='true'
                  :header-cell-style="{background:'#f5f5f5'}"
                  class="user-list-table"
                  :data='userListData.list'
                  border>
          <el-table-column label='编号'
                           align='center'
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop='user_name'
                           label='用户名'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='nick_name'
                           label='用户昵称'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='company_name'
                           label='所属公司'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='job_name'
                           label='岗位'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='phone'
                           label='手机号'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='state'
                           label='状态'
                           align='center'>
            <template slot-scope="scope">
              <span>{{scope.row.state==='1'?'正常':'冻结'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop='login_time'
                           label='最近登录时间'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label='操作'
                           width='200'
                           align='center'>
            <template slot-scope="scope">
              <el-button type="text">二维码</el-button>
              <el-button type="text"
                         @click="printPage">打印</el-button>
              <el-button type="text"
                         @click="editUserList">编辑</el-button>
              <el-button type="text"
                         @click="dialogVisible=true">冻结</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change='handlePageChange'
                       :current-page='requestParam.page'
                       :page-size='requestParam.page_size'
                       layout='total,sizes,prev, pager, next, jumper'
                       background
                       :total='userListData.total_count'
                       align='center'>
        </el-pagination>
        <el-dialog title="信息"
                   :visible.sync="dialogVisible"
                   width="30%">
          <span>确定冻结该账号吗？</span>
          <span slot="footer"
                class="dialog-footer">
            <el-button type="primary"
                       @click="dialogVisible = false">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>
        <EditUserDialog :dialogVisible.sync="editAccountDialogVisible"
                        :dialogStatus="editAccountStatus"
                        :dialogForm="editAccountData"></EditUserDialog>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import EditUserDialog from './components/EditUserDialog'
export default {
  components: {
    EditUserDialog
  },
  data () {
    return {
      dialogVisible: false,
      requestParam: {
        page: 1,
        page_size: 10
      },
      userListData: {
        list: [
          {
            user_name: '张三',
            nick_name: 'zs',
            company_name: '构件厂测试',
            job_name: '测试',
            phone: '13245645800',
            state: '1',
            login_time: '2019-07-25 21:48:36'
          },
          {
            user_name: '张三',
            nick_name: 'zs',
            company_name: '构件厂测试',
            job_name: '测试',
            phone: '13245645800',
            state: '1',
            login_time: '2019-07-25 21:48:36'
          }
        ],
        total_page: 0,
        total_count: 0
      },
      // 新增/修改账号弹框是否可见
      editAccountDialogVisible: false,
      // 新增或修改账号状态
      editAccountStatus: 'edit',
      // 新增或修改账号数据对象
      editAccountData: {
        user_name: '',
        user_nickname: '',
        real_name: '',
        job_name: '',
        phone: ''
      }
    }
  },
  methods: {
    // 分页
    handlePageChange () {

    },
    // 打印功能
    printPage () {
      window.print()
    },
    editUserList (row) {
      this.editAccountStatus = 'edit'
      this.editAccountDialogVisible = true
    }
  },
  created () { },
  mounted () { }
}
</script>

<style lang="scss" scoped>
.userManage-container {
  padding: 20px;
  .userManage-maintop {
    margin-bottom: 20px;
  }
  .user-list-table {
    margin-bottom: 20px;
  }
}
</style>
